{% extends 'app_doc/editor/create_base_vditor.html' %}
{% load static %}
{% load i18n %}
{% block title %}修改文档模板 - {{doctemp.name}}{% endblock %}

{% block head_toolbar %}
<a class="btn pull-left" aria-label="" href="{% url 'create_doctemp' %}?pid={{project.id}}" target="_blank">
    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建模板</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_doctemp' %}?pid={{project.id}}" target="_blank">
    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理模板</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
</a>
{% endblock %}

{% block left_opera %}
    {% include 'app_doc/editor/tpl_left_modify_doctemp_custom.html' %}
{% endblock %}


{% block content %}
    <div class="create-doc-form">
        <div class="layui-form" style="padding-bottom:10px;">
            <div class="layui-input-block" style="margin-left:0px;">
              <input type="text" name="doc-name" id="doctemp-name" required lay-verify="required" value="{{doctemp.name}}" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div id="editor-md">
        <textarea style="display:none;">{{doctemp.content}}</textarea>
        <textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
    </div>
{% endblock %}

{% block custom_script %}
    <script>
        //修改文档模板
        modifyDocTemp = function(){
            $('button.layui-btn').attr("disabled",true);
            $('button.layui-btn').addClass('layui-btn-disabled');
            layer.load(1);
            var data = {
                'doctemp_id':'{{ doctemp.id }}',
                'name':$("#doctemp-name").val(),
                'content':editor.getValue(),
            }
            $.post("{% url 'modify_doctemp' doctemp_id=doctemp.id %}",data,function(r){
                layer.closeAll("loading");
                if(r.status){
                    //修改成功
                    window.localStorage.removeItem('mrdoc_doc_cache') // 清空文档缓存
                    layer.msg('修改成功，即将跳转',function(){
                        md_changed = false;
                        window.location.href = "{% url 'manage_doctemp' %}";
                    });
                }else{
                    //创建失败
                    layer.msg('保存失败');
                    $('button.layui-btn').attr("disabled",false);
                    $('button.layui-btn').removeClass('layui-btn-disabled');
                }
            });
        };
        // 查看本地文档缓存
        $("#doc-cache-btn").click(function(){
            var editor_cache = window.localStorage.getItem('mrdoc_doc_cache') // 获取文档缓存内容
            if(editor_cache === null){
                var editor_cache_cnt = 0
            }else{
                var editor_cache_cnt = editor_cache.replace(/\s+|[\r\n]/g,"").length
            }
            if(editor_cache_cnt > 5){ // 文档缓存去除空格换行后长度大于5
                console.log("存在文档缓存")
                $("#doc-cache-content").val(editor_cache)
                layer.open({
                    title:"浏览器文档缓存",
                    type:1,
                    id:'doc-cache',
                    area:['500px','500px'],
                    content:$('#doc-cache-div'),
                    btn:['使用缓存',"删除缓存"],
                    success : function(index, layero) { // 成功弹出后回调
                        form.render();
                    },
                    yes:function(index, layero){
                        editor.setValue(editor_cache)
                        window.localStorage.removeItem('mrdoc_doc_cache')
                        layer.closeAll()
                        autoCacheDoc();
                    },
                    btn2:function(index,layero){
                        window.localStorage.removeItem('mrdoc_doc_cache')
                        layer.closeAll()
                    }
                })
            }else{
                layer.msg("暂无本地缓存")
            }
        })
    </script>
{% endblock %}